<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>d3.js</title>
		<script src="../js/d3.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div>K歌之王</div>
		<div>陈奕迅</div>
		<script type="text/javascript">
			var div=d3.select("body").selectAll("div").data(["我以为只要唱的用心良苦","陈奕迅"],function(d){
		    	return d||this.textContent;
		    })
			var d1=d3.transition().duration(1000).each(function(){
				div.exit().transition().style("background-color","yellow").transition().style("opacity",0).remove();//渐变成其他颜色  会默认为黑色开始渐变
			})
			var d2=d1.transition().duration(1000).each(function(){
				div.transition().style("background-color","orange");
			})
			var d3=d2.transition().duration(1000).each(function(){
				div.enter().append("div").text(function(d){
					return d;
				}).style("opacity",0).transition().duration(1000).style("opacity",1).style("background-color","green");
			})
		</script>
		<script>

//var duration = 750;
//
//var div = d3.select("body").selectAll("div")
//  .data(["我以为只要唱的用心良苦","陈奕迅"], function(d) { return d || this.textContent; });
//
//// 1. exit
//var exitTransition = d3.transition().duration(750).each(function() {
//div.exit()
//    .style("background", "red")
//  .transition()
//    .style("opacity", 0)
//    .remove();
//});
//
//// 2. update
//var updateTransition = exitTransition.transition().each(function() {
//div.transition()
//    .style("background", "orange");
//});
//
//// 3. enter
//var enterTransition = updateTransition.transition().each(function() {
//div.enter().append("div")
//    .text(function(d) { return d; })
//    .style("opacity", 0)
//  .transition()
//    .style("background", "green")
//    .style("opacity", 1);
//});

</script>
	</body>
</html>
